<template>
	<div class="card_box">
		<div class="card" v-for="card in allcard" :key="card.card_name" :style="'background:'+card.bgcolor+';color:'+card.wordcolor" v-if="card.card_type != 2">
			<span class="name">
				{{card.card_name}}
				<i v-if="card.card_type == 3">({{card.belongs_to_vipcard_receive_set.term_name}} {{card.belongs_to_vipcard_receive_set.stock_day}}天)</i>
			</span>
			<div class="time">
				有效期：{{youxiaoqi(card.belongs_to_vipcard_receive_set)}}
				<br/>
				<template v-if="card.belongs_to_vipcard_receive_set.is_infinite != '1'">
					过期后调整至 {{getcard(card.belongs_to_vipcard_receive_set.overdue_card_id)}}
				</template>
			</div>
			<div class="quanyi">
				<!-- <div v-if="card.is_mailing == 1">
					<el-tooltip class="item" effect="light" content="包邮" placement="top">
						<i class="iconfont icon-99yuanbaoyou"></i>
					</el-tooltip>
				</div> -->
				<div v-if="card.discount !== '0.00'">
					<i class="iconfont icon-zhekouqia"></i> 会员折扣{{card.discount}}折
				</div>
				<div v-if="card.give_points !== ''">
					<i class="iconfont icon-jifen"></i> 开卡赠送{{card.give_points}}积分
				</div>
			</div>
			<div class="kc" v-if="card.card_type == 3">剩余:{{card.belongs_to_vipcard_receive_set.stock_num}}张</div>
			<div class="button" @click="linqu(card.id)">
				<template v-if="card.card_type == 1">免费领取</template>
				<template v-if="card.card_type == 3">购买 ￥{{card.belongs_to_vipcard_receive_set.stock_price}}</template>
			</div>
		</div>
	</div>
</template>

<script>
	import { Blur, Toast } from 'vux'
	import { mapState, mapActions } from 'vuex';
	export default {
		components:{
			Blur
		},
		data(){
			return {

			}
		},
		methods : {
			youxiaoqi(belongs){
				if(belongs.is_infinite == '1'){
					return '无限期'
				}else if(belongs.is_infinite == '2'){
					return '至发卡日起后'+(belongs.valid_days || 0)+'天'
				}else{
					return belongs.startdate == '' ? '请选择' : belongs.startdate + ' 至 ' + belongs.enddate
				}
			},
			getcard(id){
				if(id == 0) return '非会员';
				// return this.alldata.filter(item => item.id == id)[0].card_name
				let card = this.allcard.filter(item => item.id == id)
				if(card.length){
					return card[0].card_name;
				}else{
					return 'null'
				}
			},
			linqu(id){
				this.$http.member.post('/viphascard',{
					vip_id : this.userid,
					vip_card_id : id,
					remarks : '',
					operator : ''
				}).then(res => {
					if(res.data.code){
						this.$vux.toast.show({
							text: '领取成功'
						})
						this.initusercard();
					}else{
						this.$vux.toast.show({
							type : 'warn',
							text: '领取失败'+res.data.message
						})
					}
				})
          .catch(err => {
            this.$message({
              message: '登陆过期，请重新登陆！',
              type: 'error'
            });
            localStorage.removeItem('user');
            localStorage.removeItem('company');
            localStorage.removeItem('api_token');
            localStorage.removeItem('refresh_token');
            location.reload()
          })
			},
			...mapActions('user',[
				'initusercard'
			])
		},
		computed : {
			...mapState('user',[
				'allcard',
				'userid'
			])
		}
	}
</script>

<style lang="less" scoped>
	.card_box{height:100%;/*background:#313131;*/padding-top:20px; box-sizing: border-box; overflow-y: scroll;}
	.card{
		padding:10px;
		width: 90%;
		height: 150px;
		background: green;
		margin:5px auto;
		border-radius:5px; color:#fff; font-size: 12px;
		box-shadow: 0px 0px 5px 0px #fff inset;
		position: relative;
		.kc{
			position: absolute;right: 10px; top:10px;
		}
		.button{position: absolute; right: 10px; bottom: 10px; padding:2px 8px;border:1px solid #fff;}
	}
	.card .name{
		font-size: 14px;
		i { font-size:12px; font-style: normal}
	}
	.quanyi{
		margin-top: 10px; padding-top: 10px; border-top:1px solid rgba(250,250,250,.5);
		i{vertical-align: middle}
	}


</style>
